<template>
    <ul class="shopul_level clearfix">
        <li style="float:left;list-style: none;margin: 6px;" v-for="(template,index) in storeTemplates" :key="index">
            <img :src="template.img" width="160" height="332" />
            <p style="text-align: center;">
                <el-checkbox-group v-if="isEdit.toString().indexOf('true') !=-1" v-model="alreadyCheck" >
                    <el-checkbox :label="template.name"></el-checkbox>
                </el-checkbox-group>
                <span v-if="isEdit.toString().indexOf('false') != -1" style="text-align: center; color:#999;padding: 15px 5px;">{{template.name}}</span>
            </p>
        </li>
        <div style="clear: both;"></div>
    </ul>
</template>

<script>
    import {
        getList
    } from "@/api/base/store/storeTemplate";
    import { mapGetters } from "vuex";

    export default {
        props:{
            //已经选中的模板
            usedTemplate:{
                type: Array,
                default: function(){
                    return []
                }
            },
            //本页面是否可以编辑
            isEdit:{
                type:String,
                default: "false"
            }
        },
        data () {
            return {
                alreadyCheck:[],
                storeTemplates:[],
                data: []
            };
        },
        watch: {
          alreadyCheck(val){
            console.log(val);
          },
            usedTemplate(newv,oldv){
              this.alreadyCheck=newv;
                this.loading = true;
                getList().then(res => {
                    const data = res.data.data;
                    const storeTemplates=[];
                    for(let i=0;i<data.length;i++){
                        storeTemplates.push(JSON.parse(data[i].description));
                    }
                    this.storeTemplates=storeTemplates;
                });
            }
        },
        mounted(){
            this.onLoad();
        },
        computed: {
            ...mapGetters(["permission", 'userInfo'])
        },
        methods: {
            onLoad () {
                this.alreadyCheck=this.usedTemplate;
                this.loading = true;
                getList().then(res => {
                    const data = res.data.data;
                    const storeTemplates=[];
                    for(let i=0;i<data.length;i++){
                        storeTemplates.push(JSON.parse(data[i].description));
                    }
                    this.storeTemplates=storeTemplates;

                });
            }
        },

    };
</script>
